<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui.dtree示例</title>
    <link rel="stylesheet" href="/hm/admin/themes/pear/css/pear.css">
    <link href="/hm/admin/common/css/loader.css" rel="stylesheet">
    <link href="/hm/admin/common/css/admin.css" rel="stylesheet">
    <script src="/hm/admin/plugins/layui/layui.js"></script>
    <script src="/hm/admin/themes/pear/pear.js"></script>
    <script src="/hm/admin/plugins/jquery/jquery.min.js"></script>
<!--    <link rel="stylesheet" href="//cdn.bootcss.com/layui/2.5.6/css/layui.min.css">-->
<!--    <script src="//cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>-->
<!--    <script src="//cdn.bootcss.com/layui/2.5.6/layui.min.js"></script>-->
<!--    <script src="//cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>-->
<!--    <script src="//cdn.bootcss.com/layui-dtree/2.4.5/layui-dtree.js"></script>-->
</head>
<body>
<!--<div id="dtree" class="dtree" data-id="-1" name="parentId"></div>-->
<ul class="dtree" data-id="-1" id="dtree" name="parentId"></ul>
<script>
    layui.use(['dtree'], function(){
        var dtree = layui.dtree;

        //定义树形结构数据
        var data = [
            {
                title: '节点1',
                id: 1,
                aa:44,
                children: [
                    { title: '节点1.1', id: 11 },
                    { title: '节点1.2', id: 12 }
                ]
            },
            {
                title: '节点2',
                id: 2,
                aa:55,
                children: [
                    { title: '节点2.1', id: 21 },
                    { title: '节点2.2', id: 22 }
                ]
            }
        ];

        //使用URL获取后台数据
        dtree.renderSelect({
            elem: '#dtree',
            url: "/hm/admin/system/power/selectParent",
            //data:data,
            selectInputName: {nodeId: "parentId", context: "title"},
            method: 'post',
            skin: "layui",
            dataFormat: "list",
            //initLevel: 2,
            basicData:{aa1:"data"},
            //record: true,
            response: {treeId: "id", parentId: "parentId", title: "title",basicData: "data"},
            //selectInitVal: "0",
            click: function(node) {
                 console.log(node.param1);
                 console.log(node.param2);
            },
            nodeFormat: function (node) {
                // 添加自定义属性到节点对象上
                node.myData = node.data.myData;
                return node;
            },
            done: function(res, $ul, first){
                if (first) {
                    dtree.dataInit("dtree", "2");
                    // 也可以在这里指定，第二个参数如果不填，则会自动返显当前选中的数据
                    var selectParam = dtree.selectVal("dtree");

                    //dtree.node.basicData ( "{ac:123}");

                    // 第一次渲染完成后，获取每个节点的数据，并绑定到节点上
                    //var nodes = dtree.getParam("dtree");
                    // for (var i = 0; i < nodes.length; i++) {
                    //     var node = nodes[i];
                    //     var data = node.data; // 获取节点对应的数据
                    //     dtree.changeCheckbarNodesParam("tree", [node.nodeId], {mydata: data});
                    // }
                    //dtree.setNodeParam("a1",res[0].aa);
                    // dtree.initData("tree", res.data, function(data){
                    //     data.basicData = {
                    //         customData: "your-custom-data"
                    //     };
                    // });
                    // 遍历节点，添加自定义参数
                    layui.each(res.data, function(index, item){
                        item.yygp = "yourCustomValue";
                    });
                }
            }
        });

        //在点击节点时获取自定义参数
        dtree.on("node('dtree')", function(obj,b1,b2,b3){
            // var param = dtree.getNowParam("dtree");
            // let param1 = dtree.getParam("dtree");
             var nodeData = obj.param; //获取节点数据
            // console.log("点击了节点：" + obj.param);
            //var data = dtree.getData(obj.param.nodeId);
            //console.log(data.menuType);
            // var customParam1 = nodeData.customParam1; //获取自定义参数1
            // var customParam2 = nodeData.customParam2; //获取自定义参数2
            // console.log("点击了节点：" + nodeData.title);
            // console.log("自定义参数1的值为：" + customParam1);
            // console.log("自定义参数2的值为：" + customParam2);
        });

    });
</script>
</body>
</html>
